<template>
  <div class="u-card" :class="[fill ? 'u-card-fillcontent' : '']">
    <div class="u-card-header">
      <div class="left">
        <a-icon
          v-if="icon"
          :type="icon"
          :style="iconStyle"
          class="u-card-icon"
        />
        <span> {{ title }}</span>
      </div>
      <div class="right" v-if="$slots.right">
        <slot name="right"></slot>
      </div>
    </div>
    <div class="u-card-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "UCard",
  props: {
    title: {
      type: String,
      required: true,
    },
    icon: {
      type: String,
    },
    fill: {
      type: Boolean,
      default: false,
    },
    iconColor: {
      type: String,
      default: "#1890ff",
    },
  },
  computed: {
    iconStyle() {
      return {
        color: this.iconColor,
      };
    },
  },
};
</script>
